<template>
	<view class="shop-item margin-top-sm l-f"
		hover-class="hover-class"
		@click="toDetail(options.id)">
		<view>
			<image class="shop-item_cover" :src="imgURL+options.indexImg" mode="aspectFill"></image>
		</view>
		<view class="l-f l-row-sb l-f1">
			<view class="margin-left-xs">
				<view class="shop-item_name l-line1">{{ options.productName }}</view>
				<view class="text-sm margin-top-xs">
					<text>所需积分：</text>
					<text class="theme-color">{{ options.integratedWorth }}</text>
				</view>
				<view class="flex-row l-mg-top10" v-if="options.remark!=null && options.remark.time > 0">
					<uni-countdown :day="options.remark.day" :hour="options.remark.hour" :minute="options.remark.minu"
						:second="options.remark.sec" color="#EE3F4D" :font-size="12" @timeup="onTimeup(options.id)" />
					<view class="text-sm">后</view>
				</view>
			</view>
			<view style="text-align: center">
				<view class="shop-item_price theme-color">{{ options.inventory }}</view>
				<view>剩余库存</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { imgURL } from '@/api/request';
	const props = defineProps({
		options: {
			required: true,
			type: Object,
			default() {
				return {}
			}
		}
	})
	// 跳转详情
	const toDetail = (id : string) => {
		uni.navigateTo({
			url: '/pages/exchange/detail?id=' + id
		})
	}
	const emits = defineEmits(['timeup'])
	const onTimeup = (id: any) => {
		emits('timeup',id)
	}
</script>

<style scoped lang="scss">
.shop-item {
	gap: 60rpx;
	&_cover {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	&_name {
		font-size: 28rpx;
	}
	&_price {
		font-size: 48rpx;
	}
}
</style>